Badge
Tec{h}tonic gives you 2 types of badges to use in different areas
Badge on icons
Badge on icons are usually used to show how many notifications, items, messages you have in a particular app.
7
3
6
You can add a badge on any icon if you'd add the "icon-badge" class along with the common class "badge" in your website.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="badge-items">
<div class="cart"><i class="fas fa-shopping-cart fa-2x"></i></div>
<div class="badge icon-badge">7</div>
</div>
<div class="badge-items">
<div class="envelope"><i class="fas fa-envelope fa-2x"></i></div>
<div class="badge icon-badge">3</div>
</div>
<div class="badge-items">
<div class="notification"><i class="fas fa-bell fa-2x"></i></div>
<div class="badge icon-badge">6</div>
</div>
Badge on Avatars
Badge on avatars are used to show you the status of that person right now.
They can be of three types : Online, offline, do not disturb
You can add a badge for different status if you'd just add "on-badge", "off-badge", "dnd-badge" along with the common "badge" class.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="badge-items">
<img src="../../assets/avatar-image.jpg" alt="" class="round-av normal">
<div class="badge on-badge"></div>
</div>
<div class="badge-items">
<img src="../../assets/avatar-image.jpg" alt="" class="round-av normal">
<div class="badge off-badge"></div>
</div>
<div class="badge-items">
<img src="../../assets/avatar-image.jpg" alt="" class="round-av normal">
<div class="badge dnd-badge"></div>
</div>